<template>
	<div class="Tshop-con">
		<div class="banner">
      <!--swiper-->
      <div class="swiperouterbox">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide box_siz" v-for="(str,index) in data.detailImgArray" :key="index">
              <!--//:style="{ backgroundImage: 'url(' + str.url + ') no-repeat right' }"-->
              <img :src="str.detailImg" alt="" />
            </div>
          </div>
          <!--<div class="swiper-pagination"></div>-->
        </div>
      </div>
			<!--<img :src="data.vipCardImg" alt="">-->
		</div>
		<div class="shop">
			<div class="phto">
        <img :src="data.pic" alt="">
        <span>{{data.name}}</span>
			</div>
			<div class="shop-info">
				<div>
					<img src="../../assets/images/newimg/dhjs(2)@2x.png" alt="">
					<a :href="'tel:' + data.phone"><span>{{data.phone}}</span></a>
				</div>
				<div>
					<img src="../../assets/images/newimg/dzjs(1)@2x.png" alt="">
					<span>{{data.address}}</span>
				</div>
			</div>
		</div>

		<!-- 商家详情 -->
		<div class="detail">
			<h4>商家介绍:</h4>
      <div v-html="data.content"></div>
      <!--<p>{{data.content}}</p>-->
      <!--<img src="../../assets/images/newimg/zu82@2x.png" alt="">-->
      	<div id="output" style="display:none"></div>

		</div>
    <div class="detail" id="gongzhonghao" v-show="gongzhonghao">
      <a  style="color: #ffffff;" :href="data.gongzhonghao"><span>跳转公众号</span></a>
    </div>
       <video :src="data.radio" id="video" controls :poster="data.videoImg" style="width:100% ">

       </video>
	</div>

</template>
Vue.component('video-player',{template:'#video-player'})
<script>
  import Swiper from 'swiper'
  import '../../assets/swiper.min.css'

window.onload=function(){
  var video, output;
  var scale = 0.8;
  var initialize = function() {
  output = document.getElementById("output");
  video = document.getElementById("video");
  video.addEventListener('loadeddata',captureImage);
  };


  var captureImage = function() {
      var canvas = document.createElement("canvas");
      canvas.width = video.videoWidth * scale;
      canvas.height = video.videoHeight * scale;
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      var img = document.createElement("img");
      img.src = canvas.toDataURL("image/png");
      alert(img.src)
      output.appendChild(img);
  };


}




  export default {
    data() {
    var that=this
      return {
        businessId: '',
        data: '',
        gongzhonghao : false

        }


    },
    methods: {
      initialize(){
      }
    },
    mounted() {
      var that = this
      this.businessId = this.$route.params.businessId
      this.$http({
        method: 'get',
        url: 'http://api.wangjianxin.top/getBusinessInfo?businessId=' + this.businessId
      }).then(function(res) {
        if(res.status === 200) {
          that.data = res.data
          that.initialize();
          console.log(that.data)
          if(res.data.gongzhonghao.length > 0){
            that.gongzhonghao = true
          }
          var swiper = new Swiper('.swiper-container', {
            loop: false,
            initialSlide: 0,
            observer: true,
            centeredSlides: true, //true 为slide居中
            autoplay: true, //zidong
            onTouchEnd: function() {
              swiper.startAutoplay()
            }
          })
        }
      })
    }
  }
</script>

<style scoped>
	.backimg {
		width: 7.5rem;
		min-height: 100vh;
		position: absolute;
		right: 0;
		bottom: 0;
		z-index: -99;
	}
	/* 标题 */

	.head {
		width: 100vw;
		height: 1rem;
		/*background: #111111;*/
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.head img {
		width: .2rem;
		position: absolute;
		left: .3rem;
		top: .35rem
	}

	.head span {
		font-size: .3rem;
		font-family: PingFang-SC-Regular;
		font-weight: 400;
		color: rgba(51, 54, 58, 1);
	}
	/* banner图 */

	.banner {
		height: 6rem;
		width: 100vw;
		overflow: hidden;
	}

	.banner img {
		width: 100%;
	}

	.shop {
		padding: .4rem 0;
		width: 6.85rem;
		margin: 0 auto;
		border-bottom: .01rem solid rgba(198, 198, 198, 1);
		;
	}

	.shop,
	.phto {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/*background: #1d1d1d;*/
		color: rgba(51, 54, 58, 1);
		font-size: .3rem;
	}

	.phto img {
		width: .9rem;
		padding-right: .3rem;
	}

	.shop-info {
		padding-right: .2rem;
	}

	.shop-info div:last-child {
		padding-top: .2rem;
	}

	.shop-info div img {
		width: .3rem;
    vertical-align: middle;
	}

	.detail {
		color: rgba(51, 54, 58, 1);
		font-size: .24rem;
		padding: .2rem 0;
		width: 6.85rem;
		margin: 0 auto;
	}

	.detail h4 {
		font-size: .26rem;
		color: rgba(51, 54, 58, 1);
	}

	.detail p {
		padding-top: .2rem;
		text-indent: 2em;
		line-height: .4rem;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.detail img {
		padding-left: 49%;
		padding-top: .2rem;
		width: .3rem;
	}

  .video{
    width: 7.5rem;
    background:rgba(255,255,255,1);
    overflow: hidden;
    height: 3.38rem;
  }
  .video video{
    margin: .3rem 5% 0;
    border-radius: .2rem;
    width: 90%;
    height: 2.9rem;

  }
</style>
